<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to my website</title>
    <link rel="stylesheet" type="text/css" href="css/Login.css">
    <link rel="stylesheet" type="text/css" href="/css/tooltip.css">
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script src="js/Login.js"></script>
</head>

<body>
    <!-- 最外部容器 -->
    <div class="container">
        <!-- 登录容器 -->
        <div class="container login">
            <!-- 表单 -->
            <form class="form" id="login_form" method="post">
                <div class="row">
                    <h2 class="form_title">账号登录</h2>
                    <!-- 中间分割线 -->
                    <div class="vl">
                        <span class="vl-innertext"></span>
                    </div>
                    <!-- 其他登录方式 -->
                    <div class="col">
                        <button class="login_button_else" id="qqLogin_button" onclick="alert('qq登录');">
                            <img class="button_icon" id="qq_img" src="./css/img/01_qq_logo.png" />
                            登录
                        </button>
                        <button class="login_button_else" id="weChatLogin_button" onclick="alert('微信登录')">
                            <img class="button_icon" id="weChat_img" src="./css/img/Wechat_logo.png" />
                            微信登录
                        </button>
                        <button class="login_button_else" id="zfbLogin_button" onclick="alert('支付宝登录')">
                            <img class="button_icon" id="zfb_img" src="./css/img/zfb_logo.png" />
                            支付宝登录
                        </button>
                    </div>

                    <div id="tip">
                        <p style="text-align: center;">或手动登录</p>
                    </div>
                    <!-- input -->
                    <div class="col">
                        <input type="text" class="form_input" name="username_in" id="username_in" placeholder="账号" required>
                        <input type="password" class="form_input" name="password_in" id="password_in" placeholder="密码" required>
                        <button type="submit" class="form_button" id="login_button">登录</button>
                        <!-- 一个页面转跳模拟（后面MVC控制） -->
                        <a href="./main.html">mock</a>  
                    </div>
                    <!-- 转跳链接 -->
                    <div class="col1">
                        <a class="form_link logon_link" id="login2logon">（&nbsp;&nbsp;注册账号&nbsp;&nbsp;）</a>
                    </div>
                    <div class="col1">
                        <a class="form_link resetPwd_link" id="login2resetPwd">（&nbsp;&nbsp;忘记密码&nbsp;&nbsp;）</a>
                    </div>
                </div>
            </form>
        </div>
        <!-- 注册容器（初始不可见） -->
        <div class="container logon nodisplay">
            <!-- 表单 -->
            <form class="form" action="#" id="logon_form">
                <div class="row">
                    <h2 class="form_title">账号注册</h2>
                    <div class="vl">
                        <span class="vl-innertext"></span>
                    </div>
                    <div class="col">
                        <input type="text" class="form_input" id="username_on" placeholder="账号" required>
                        <input type="password" class="form_input" id="password_on" placeholder="密码" required>
                        <input type="tel" class="form_input" id="telephone_on" placeholder="手机号" required>
                    </div>
                    <div class="col">
                        <input type="email" class="form_input" id="email_on" placeholder="电子邮箱" required>
                        <input type="date" class="form_input" id="birthday_on" placeholder="生日" required>
                        <button type="submit" class="form_button" id="logon_button">注册</button>
                    </div>
                    <div class="col1">
                        <a class="form_link login_link" id="logon2login">（&nbsp;&nbsp;返回登录&nbsp;&nbsp;）</a>
                    </div>
                    <div class="col1">
                        <a class="form_link resetPwd_link" id="logon2resetPwd">（&nbsp;&nbsp;忘记密码&nbsp;&nbsp;）</a>
                    </div>
                </div>
            </form>
        </div>
        <!-- 密码重置容器（初始不可见） -->
        <div class="container resetPwd nodisplay">
            <!-- 表单 -->
            <form class="form" action="#" id="resetPwd_form">
                <div class="row">
                    <h2 class="form_title">密码重置</h2>
                    <div class="vl">
                        <span class="vl-innertext"></span>
                    </div>
                    <div class="col">
                        <input type="text" class="form_input" id="username_re" placeholder="账号" required>
                        <input type="tel" class="form_input" id="telephone_re" placeholder="手机号" required>
                    </div>
                    <div class="col">
                        <input type="password" class="form_input" name="password1_re" id="password1_re" placeholder="新密码" required>
                        <input type="password" class="form_input" name="password2_re" id="password2_re" placeholder="确认密码" required>
                        <button type="submit" class="form_button" id="resetPwd_button">重置密码</button>
                    </div>
                    <div class="col1">
                        <a class="form_link login_link" id="restPwd2login">（&nbsp;&nbsp;返回登录&nbsp;&nbsp;）</a>
                    </div>
                    <div class="col1">
                        <a class="form_link logon_link" id="resPwd2logon">（&nbsp;&nbsp;注册账号&nbsp;&nbsp;）</a>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <div id="space_area">
        <a id="space_link" href="https://space.bilibili.com/688055875?spm_id_from=333.1007.0.0">to My Space</a>
    </div>
</body>

</html>